<template>

 
    <el-container style='height:100%'>
      <UserInfo />
      <el-container>
        <el-aside width="200px">
          <el-menu :default-active="$route.path" router width="200px" @open="handleOpen" @close="handleClose">
            <el-menu-item v-for="item in menuItems" :key="item.index" :index="item.url">
              <el-icon>
                <component v-bind:is="getIconByLabel(item.desc)" />
              </el-icon>
              <span>{{ item.desc }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <router-view />
          </el-main>

        </el-container>
      </el-container>
      <el-footer  >Footer</el-footer>
    </el-container>

</template>

<script>

import { Document, Setting, UserFilled, Menu as IconMenu } from "@element-plus/icons-vue";
import SysManager from "@/components/SysManager";
import UserInfo from "@/views/UserInfo";
import * as storage  from '@/util/localstorageutil.js';

export default {
  name: "AsidePage",
  components: {
    UserFilled,
    Document,
    IconMenu,
    UserInfo,
  }
  ,
  data() {
    return {
      menuItems: [
        // {
        //   url: "/sys",
        //   desc: "SysManager"
        // },
        // {
        //   url: "/chart",
        //   desc: "ChartOverview"
        // }
        // ,
        // {
        //   url: "/inventoryview",
        //   desc: "InventoryView"
        // }
      ]
    }
  },

  mounted() {
    this.initMeuns();
  },

  methods: {

    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },

    initMeuns() {
      //从登录态获取
      let item = storage.getItem(storage.LS_USERINFO);
      this.menuItems = JSON.parse(item).menus;
    },

    getIconByLabel(label) {
      switch (label) {
        case "ChartOverview":
          return IconMenu;
        case "SysManager":
          return Document;
        case "InventoryView":
          return UserFilled;
        default:
          return Document;
      }
    }
  }
};

</script>


<style scoped>
.el-footer{
  background-color: var(--el-color-primary-light-7);
}
</style>
